<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/templates/style.css">
    <title>王菜鸟的淘宝网--我的购物车</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .item-container {
            text-align: center;
        }

        body > div.panel.panel-default > table {

        }

        body > div.panel.panel-default > div {
            height: 80px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
        }

        .to-pay {
            float: right;
            margin: 50px;
            width: 300px;
            height: 50px;
            background-color: #FF4400;
            border: 0px;
            color: #FFFFFF;
            font-size: 20px;
            border-radius: 10px;
        }

        .to-pay:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body class='relative cart-list'>
{% if list %}

    <div class='panel panel-default'>
        <div class="panel-heading">我的购物车</div>
        <nav aria-label="...">
            <ul class="pager">
                <li><a href="#">上一页</a></li>
                <li><a href="#">下一页</a></li>
            </ul>
        </nav>
        <form action="{% url 'pay:success' %}" method="POST">
            {% csrf_token %}
            <table class="table">
                <tr>
                    <th>选中</th>
                    <th>图片</th>
                    <th>价格</th>
                    <th>邮费</th>
                    <th>标题</th>
                    <th>出版社</th>
                    <th>销量</th>
                    <th>数量</th>
                </tr>

                {% for l in list %}

                    <tr>
                        <td>
                            <input type="checkbox" name="shopid" value="{{ l.id }}*{{ l.count }}" checked="checked"/>
                        </td>
                        <td>
                            <img class='items' src={{ l.image }} style="width:100px">
                        </td>
                        <td>
                            {{ l.price }}
                        </td>
                        {% if l.postal %}
                            <td>
                                包邮
                            </td>
                        {% endif %}
                        <td>
                            {{ l.title | safe }}
                        </td>
                        <td>
                            {{ l.shopNick }}
                        </td>
                        <td>
                            {{ l.payNum }}
                        </td>
                        <td>
                            <select>
                                <option style="width: 30px">{{ l.count }}</option>
                            </select>

                        </td>

                    </tr>
                {% endfor %}
            </table>
            <button class="to-pay" type="submit">去结算</button>
        </form>

    </div>
{% else %}
    <div style="text-align: center; margin-top: 10%">
        <p>亲，您的购物车是空的呢！请去添加商品到购物车吧~</p>
        <a href="{% url 'items:index' %}">点击此处返回首页</a>
    </div>

{% endif %}
</body>

</html>